<script setup lang="ts">
import { useRequest } from 'vue-request'
import dayjs from 'dayjs'
import { fetchBalanceDetailsAPI } from '@/apis/fetchBalanceDetails'
import { useUserInfoStore } from '@/store/userInfo'

const router = useRouter()
const userInfoStore = useUserInfoStore()

const money = ref('')
onLoad((options) => {
  if (!options?.money)
    return
  money.value = options.money
})

const selectedTabIndex = ref(0)
const { data, loading, refresh } = useRequest(() => fetchBalanceDetailsAPI(
  { type: selectedTabIndex.value.toString() },
  userInfoStore.userInfo!.token,
).then(res => res.data?.data))

watch(selectedTabIndex, () => refresh())

function hanleWithdraw() {
  router.push({
    name: 'withdrawal',
    params: {
      money: money.value,
    },
  })
}
</script>

<template>
  <view class="absolute left-0 top-0 h-400rpx w-screen bg-#3F8BF6" />
  <view class="relative z-10 px-24rpx">
    <Spacer h="50" />
    <view class="flex flex-col items-center">
      <view class="text-32rpx text-white leading-45rpx">
        我的余额
      </view>
      <Spacer h="4" />
      <view class="text-72rpx text-white font-medium leading-100rpx">
        ¥{{ money || '--' }}
      </view>
      <Spacer h="32" />
      <button
        class="rounded-full bg-white px-18rpx py-8rpx text-28rpx text-#3F8BF6 font-semibold leading-40rpx"
        :style="{ margin: '0 !important' }"
        @tap="hanleWithdraw"
      >
        立即提现
      </button>
    </view>
    <Spacer h="52" />
    <view class="mb-24rpx min-h-screen rounded-10rpx bg-white pt-20rpx">
      <Tabs :selected-index="selectedTabIndex" :items="['余额记录', '提现记录']" @change="(i) => selectedTabIndex = i" />
      <block v-for="item, index in data" :key="item.id">
        <BalanceRecordItem
          :type="selectedTabIndex === 0 ? 'income' : 'expense'"
          :title="item.memo"
          :time="dayjs(item.createtime).format('YYYY-MM-DD HH:mm')"
          :price="item.money"
        />
        <Divider v-if="index !== data!.length - 1" w="623" />
      </block>
    </view>
  </view>
  <uv-loading-page :loading="loading" loading-text="加载中..." font-size="28rpx" loading-mode="spinner" />
</template>

<route lang="yaml">
name: 'balanceRecord'
style:
  navigationBarTitleText: '余额记录'
</route>
